.lesson {
  width: 1200rpx;
  height: 810rpx;
  background: #ffffff;
  border: 16rpx solid #81b7ff;
  box-shadow: 8rpx 8rpx 0px 0px #0091ea;
  border-radius: 42rpx;
}
.lesson_title {
  width: 100%;
  padding: 12rpx 24rpx;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  .lesson_title_text {
    font-size: 28rpx;
    color: #c5c5c5;
    margin-right: 56rpx;
    &.active {
      color: #0787d1;
      border-bottom: 4rpx solid #1293ce;
      font-weight: bold;
    }
  }
}
.lesson_container {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.lesson_content {
  &:nth-child(1) {
    flex: 1;
  }
  &:nth-child(2) {
    flex: 4;
  }
  &:nth-child(3) {
    flex: 3;
    .lesson_list {
      .lesson_item {
        padding-right: 24rpx;
      }
    }
  }
}
.lesson_name {
  width: 100%;
  height: 50rpx;
  background: rgba(192, 192, 192, 0.5);
  padding-left: 24rpx;
  text {
    font-size: 30rpx;
    color: #8f8b8b;
    line-height: 50rpx;
    text-align: center;
    &.active {
      color: #0091ea;
    }
  }
}
.lesson_list {
  width: 100%;
  .lesson_item {
    width: 100%;
    height: 64rpx;
    padding-left: 24rpx;
    &.active {
      background: #0091ea;
      text {
        color: #ffffff;
      }
    }
    text {
      font-size: 24rpx;
      color: #999999;
      font-weight: bold;
      line-height: 64rpx;
    }
    .lesson_stars {
      width: 28rpx;
      height: 28rpx;
      image {
        width: 28rpx;
      }
    }
  }
  .lesson_item_active {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.lesson_scroll {
  height: 668rpx;
}
